<template>
  <a-button
    class="editable-add-btn"
    type="primary"
    style="margin-bottom: 8px; width: 58px"
    @click="handleAdd"
    ><plus-outlined
  /></a-button>
  <a-table
    :data-source="source"
    :columns="columns"
    :pagination="false"
    bordered
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="['username', 'password'].includes(column.dataIndex)">
        <div>
          <a-input
            v-if="editableData[record.key]"
            v-model:value="editableData[record.key][column.dataIndex]"
            style="margin: -5px 0"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-if="['role'].includes(column.dataIndex)">
        <div>
          <a-select
            v-if="editableData[record.key]"
            v-model:value="editableData[record.key][column.dataIndex]"
            style="width: 120px"
            :options="roles"
            @change="handleChangeRole"
          ></a-select>
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link
              @click="save(record, record.key)"
              style="margin-right: 10px"
              >save</a-typography-link
            >
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>cancel</a>
            </a-popconfirm>
          </span>
          <span v-else style="margin-right: 10px">
            <a @click="edit(record.key)">编辑</a>
          </span>
          <a-popconfirm
            v-if="source.length"
            title="Sure to delete?"
            @confirm="onDelete(record, record.key)"
          >
            <a>删除</a>
          </a-popconfirm>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script>
import { userdata } from '@/api/users'
import { ref, reactive } from 'vue'
import { cloneDeep } from 'lodash-es'
import { PlusOutlined } from '@ant-design/icons-vue'
export default {
  components: {
    PlusOutlined,
  },
  setup() {
    const columns = [
      {
        title: '用户名',
        dataIndex: 'username',
        width: '30%',
      },
      {
        title: '登录密码',
        dataIndex: 'password',
        width: '20%',
      },
      {
        title: '角色',
        dataIndex: 'role',
        width: '20%',
      },
      {
        title: '操作',
        dataIndex: 'operation',
      },
    ]
    const roles = [
      {
        value: 'user', // 下拉框必须是value 不能写其他
        label: 'user',
      },
      {
        value: 'superadmin',
        label: 'superadmin',
      },
      {
        value: 'admin',
        label: 'admin',
      },
      {
        value: 'developer',
        label: 'developer',
      },
    ]
    const source = ref([])
    const editIndex = ref(0)
    userdata().then((res) => {
      console.log(res)
      source.value = res.data
    })
    const keys = ref(4)

    const editableData = reactive({})

    const edit = (key) => {
      editIndex.value = key
      editableData[key] = cloneDeep(
        source.value.filter((item) => key === item.key)[0]
      )
    }

    const save = (record, key) => {
      console.log(record)
      Object.assign(
        source.value.filter((item) => key === item.key)[0],
        editableData[key]
      )
      // console.log(editableData[key])
      delete editableData[key]
      console.log(source.value)
    }
    // handleChangeRole
    const handleChangeRole = (val, record) => {
      // console.log(record, '-', editableData[editIndex.value])
      editableData[editIndex.value].role = val
      console.log('dataSource', source.value)
    }
    const onDelete = (record, key) => {
      console.log(record)
      source.value = source.value.filter((item) => item.key !== key)
    }

    const cancel = (key) => {
      delete editableData[key]
    }
    const handleAdd = () => {
      const newData = {
        key: keys.value,
        username: '用户名',
        password: 123456,
        role: 'user',
      }
      keys.value = keys.value + 1
      source.value.push(newData)
      // console.log(source.value)
    }
    return {
      columns,
      source,
      handleAdd,
      editableData,
      save,
      cancel,
      edit,
      onDelete,
      roles,
      handleChangeRole,
    }
  },
}
</script>
<style scoped></style>
